<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<script src="../js/vue.js"></script>
		<style>
			/* 定义提示框的基础样式 */
			.message {
				display: inline-block;
				width: 160px;
				height: 24px;
				border: 1px solid #555;
				text-align: center;
				line-height: 24px;
				margin: 10px;
			}

			/* 定义提示框在验证通过时的样式 */
			.success {
				border: 1px solid green;
				background-color: lightgreen;
				color: green
			}

			/* 定义提示框在验证失败时的样式 */
			.msg-fail {
				border: 1px solid red;
				background-color: pink;
				color: red
			}
		</style>
	</head>

	<body>
		<!-- 
	多数样式的修改，都是同时修改多个css属性，如果用style绑定，每个css属性都要写出来，代码繁琐！		
	批量修改一个元素的多个css属性，应该用class方式，代替style方式		
	将class绑定到一个对象，定义对象的属性变量
-->
		<div id="app">
			<span>电话号码：{{cellphone}}</span>
			<!-- 提示框的样式会变化，部分class需要属性绑定;提示内容会变化，需要{{}}绑定 -->
			<span class="message" :class="{success,'msg-fail':hasErrr}">{{msg}}</span>
		</div>
		<script>
			const msgSuccess = "手机号格式正确！";
			const msgFail = "手机号格式错误！";
			Vue.createApp({
				data() {
					return {
						cellphone: "12968021342", //输入的手机号
						msg: msgSuccess, //绑定提示信息的内容,默认是正确的						
						//绑定提示信息的部分样式。
						success: true,
						hasErrr: false,
					}
				},

				computed: {
					isRight() {
						//定义正则验证cellphone的内容
						var reg = /^1[3-9]\d{9}$/;
						//如果用正则验证cellphone的内容通过
						return reg.test(this.cellphone);
					},
				},
				watch: {
					cellphone() {
						if (this.isRight) { //手机号码验证有效							
							this.success = true; //更改为成功样式
							this.hasErrr = false;
							this.msg = msgSuccess; //修改span的提示信息内容
						} else { //否则如果验证无效							
							this.success = false;
							this.hasErrr = true; //更改为失败样式
							this.msg = msgFail; //修改span的提示信息内容
						}
					}
				},
			}).mount("#app");;
			//测试: 在F12->console->vm.cellphone=12968290224
			//测试: 在F12->console->vm.cellphone=15968290221
		</script>
	</body>

</html>